<template>
    <div class="view">
        <android-nav-bar title="我的分享" v-on:back="back">
<!--            <span slot="right" class="iconfont icon-share rt" @click="share">分享</span>-->
        </android-nav-bar>
        <div class="box" :style="{'background-image': `url(${shareImage}?imageView2/0/w/500/interlace/1)`,'background-size':'100%'}">
            <div class="all-top">
                <canvas id="canvas"></canvas>
                <div class="code">推荐码：{{user.code}}</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {updateUser, shareControllerToggle} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";

    @Component({
        components: {
            AndroidNavBar
        }
    })
    export default class MineShare extends Scene {
        private publicPath: string = process.env.BASE_URL;
        private shareImage: string = '';
        @State("UserStore")
        public user!: InterfaceUser;

        @State("DeviceStore")
        public device: any;

        private back(): void {
            this.navigateBack();
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private makeQRCode(): void {
            const QRCode = require("qrcode");
            const canvas = document.getElementById("canvas");
            let url = "";
            if (window.location.href.split("love.html").length == 2) {
                url = window.location.href.split("love.html")[0] + "love.html#/";
            } else {
                url = window.location.href.split("mine")[0];
            }
            let shareUrl = "";
            console.log(url);
            if (this.device.status) {
                shareUrl = `https://www.xxyhl.cn/love.html#/loginRegister?shareCode=${this.user.code}`;
            } else {
                shareUrl = `${url}loginRegister?shareCode=${this.user.code}`;
            }
            QRCode.toCanvas(canvas, shareUrl, function(error: any) {
                if (error) {
                    console.error(error);
                }
                console.log("success!");
            });
        }

        private getShareImage(): void {
            try {
                Http.get(this.api.getBaseImage, {type:'share'}).then((res) => {
                    if (res.code == 1) {
                        this.shareImage = res.data.url;
                    } else {
                        this.globalSingleResultToast(res);
                    }
                });
            } catch (e) {
                console.log(e);
            }
        }
        
        private activated():void{
            this.makeQRCode();
        }

        private mounted(): void {
            // this.onShareMessage = {
            //     title: "我在这里寻找到另一半，你也来看看吧",
            //     desc: `${this.user.introduction}`,
            //     thumb: this.user.avatar.filePath,
            //     link: `${this.webPath}#/loginRegister?shareCode=${this.user.code}`
            // };

            this.getShareImage();
        }

        private share(): void {
            //shareControllerToggle(this.onShareMessage);
        }

    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;
        overflow hidden;

        .box
            width 100vw;
            margin-top calc(var(--safe-area-inset-top) + 47px);
            height calc(100vh - var(--safe-area-inset-top) - 47px);
            //background-image url('/assets/images/background-qrcode.jpeg');
            background-color #ffffff;
            background-position bottom center;
            background-size 100% 100%;

            &::before
                display table;
                content '';

            .all-top
                margin calc((100vh - var(--safe-area-inset-top) - 47px - 200px) / 2) auto;
                text-align center;

                #canvas
                    width 160px !important;
                    height 160px !important;

                .code
                    margin-top 15px;
                    font-size 18px;


</style>
